$(function () {
    let pro = $(".province");
    let city = $(".city");
    let county = $(".county");
    let mydata;

    $.getJSON("/static/js/CN.json", function (data) {
        mydata = data;
        for (let i = 0; i < data.length; i++) {
            let e = document.createElement("li");
            $(e).html(data[i].value);
            $(e).appendTo(pro);
        }
    });
    let mycounty;
    pro.on("click", "li", function () {
        city.children().remove();
        $("#city").val("");
        county.children().remove();
        $("#county").val("");
        $("#province").val($(this).html());
        pro.removeClass("dis-blo");
        let index = $(this).index();
        mycounty = mydata[index].child;
        for (let i = 0; i < mycounty.length; i++) {
            let e = document.createElement("li");
            $(e).html(mycounty[i].value);
            $(e).appendTo(city);
        }

    });
    $("#province").click(function () {
        pro.hasClass("dis-blo") ? pro.removeClass("dis-blo") : pro.addClass("dis-blo");
    });


    city.on("click", "li", function () {
        county.children().remove();
        $("#county").val("");
        $("#city").val($(this).html());
        city.removeClass("dis-blo");
        let index = $(this).index();
        let child = mycounty[index].child;
        for (let i = 0; i < child.length; i++) {
            let e = document.createElement("li");
            $(e).html(child[i].value);
            $(e).appendTo(county);
        }
    });
    $("#city").click(function () {
        city.hasClass("dis-blo") ? city.removeClass("dis-blo") : city.addClass("dis-blo");
    });

    $("#county").click(function () {
        county.hasClass("dis-blo") ? county.removeClass("dis-blo") : county.addClass("dis-blo");
    });

    county.on("click", "li", function () {
        $("#county").val($(this).html());
        county.removeClass("dis-blo");
    });

});